<?xml version='1.0' encoding='UTF-8' ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"  
    xmlns:h="http://java.sun.com/jsf/html"  
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:c="http://java.sun.com/jsp/jstl/core"
    xmlns:p="http://primefaces.org/ui"> 

    <h:head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <h:outputScript library="primefaces" name="jquery/jquery.js" />
        <h:outputStylesheet library="css" name="style.css" /> 
        <h:outputStylesheet library="css" name="bootstrap.css" /> 
        <style type="text/css">
            body {
                padding-top: 60px;
                padding-bottom: 40px;
            }
            .sidebar-nav {
                padding: 9px 0;
            }
            
        </style>
        <title>Banqueroute</title>
    </h:head>

    <h:body>
        <f:view>
        <h:form>
            <div class="navbar navbar-inverse navbar-fixed-top">
                <div class="navbar-inner">
                    <div class="container">
                        <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </a>
                        <a class="brand" href="#">Banqueroute</a>
                        <div class="nav-collapse collapse">
                            <ul class="nav">
                                <li class="active"><h:link outcome="index.xhtml" value="Accueil"/></li>
                                <li><a href="#about">A propos</a></li>
                                <li><a href="#contact">Contacter nous</a></li>
                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                                    <ul class="dropdown-menu">
                                        <li><a href="#">Action</a></li>
                                        <li><a href="#">Another action</a></li>
                                        <li><a href="#">Something else here</a></li>
                                        <li class="divider"></li>
                                        <li class="nav-header">Nav header</li>
                                        <li><a href="#">Separated link</a></li>
                                        <li><a href="#">One more separated link</a></li>
                                    </ul>
                                </li>
                            </ul>
                                <c:if test="${!userController.connected}">
                                    <p class="navbar-form pull-right">
                                        <h:inputText id="login" value="#{userController.utilisateur.login}" class="span2" />
                                        <p:watermark for="login" value="Login" />  
                                        &nbsp;
                                        <h:inputSecret id="pwd" value="#{userController.utilisateur.pwd}" class="span2" />
                                        <p:watermark for="pwd" value="Mot de passe" />
                                        &nbsp;
                                        <h:commandButton class="btn" action="#{userController.checkLogin()}" value="Connexion" />
                                    </p>
                                </c:if>
                                <c:if test="${userController.connected}">
                                    <p class="navbar-text pull-right">
                                        Bonjour <b>#{userController.utilisateur.nom}</b> | #{userController.utilisateur.typeUser} |
                                        <h:commandLink action="#{userController.deconnexion()}" value="Deconnexion"/>
                                    </p>
                                </c:if>
                            
                        </div><!--/.nav-collapse -->
                    </div>
                </div>
            </div>
        </h:form>
        <div class="container">
            <div class="row">
                <c:if test="${userController.connected}">
                    <div class="span3">
                        <ui:insert name="left">
                            <c:if test="${userController.utilisateur.typeUser == 'Admin'}">
                                <ul class="nav bs-docs-sidenav affix">
                                    <li class="nav-header">Action</li>
                                    <li class="dropdown-submenu">
                                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Utilisateurs <i class="icon-chevron-right"></i></a>
                                        <ul class="dropdown-menu">
                                            <li class="nav-header">Utilisateurs</li>
                                            <li><h:link outcome="users.xhtml" value="Tous les utilisateurs"/></li>
                                            <li><h:link outcome="users_create.xhtml" value="Créer un utilisateur"/></li>
                                            <li><h:link outcome="users_show.xhtml" value="Mon profil"/></li>
                                        </ul>
                                    </li>
                                    <li class="dropdown-submenu">
                                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Comptes <i class="icon-chevron-right"></i></a>
                                        <ul class="dropdown-menu">
                                            <li class="nav-header">Comptes</li>
                                            <li><h:link outcome="compte_create.xhtml" value="Créer un compte"/></li>
                                            <li><h:link outcome="compte.xhtml" value="Tous les comptes"/></li>
                                        </ul>
                                    </li>
                                    <li class="dropdown-submenu">
                                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Transaction <i class="icon-chevron-right"></i></a>
                                        <ul class="dropdown-menu">
                                            <li class="nav-header">Transaction</li>
                                            <li><h:link outcome="virement.xhtml" value="Virement"/></li>
                                            <li><h:link outcome="operation_create.xhtml" value="Operation bancaire"/></li>
                                            <li><h:link outcome="operation_show.xhtml" value="Toutes les opérations"/></li>
                                        </ul>
                                    </li>
                                </ul>
                            </c:if>
                            <c:if test='${userController.utilisateur.typeUser == "Client"}'>
                                <ul class="nav bs-docs-sidenav affix">
                                    <li class="nav-header">Action</li>
                                    <li class="dropdown-submenu">
                                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Profil <i class="icon-chevron-right"></i></a>
                                        <ul class="dropdown-menu">
                                            <li class="nav-header">Profil</li>
                                            <li><h:link outcome="users_show.xhtml" value="Mon profil"/></li>
                                        </ul>
                                    </li>
                                    <li class="dropdown-submenu">
                                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Compte <i class="icon-chevron-right"></i></a>
                                        <ul class="dropdown-menu">
                                            <li class="nav-header">Compte</li>
                                            <li><h:link outcome="compte_show.xhtml" value="Mes comptes"/></li>
                                        </ul>
                                    </li>
                                    <li class="dropdown-submenu">
                                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Transaction <i class="icon-chevron-right"></i></a>
                                        <ul class="dropdown-menu">
                                            <li class="nav-header">Transaction</li>
                                            <li><h:link outcome="virement.xhtml" value="Virement"/></li>
                                            <li><h:link outcome="operation_create.xhtml" value="Operation bancaire"/></li>
                                            <li><h:link outcome="operation_show.xhtml" value="Toutes les opérations"/></li>
                                        </ul>
                                    </li>
                                </ul>
                            </c:if>
                        </ui:insert>
                    </div>
                
                    <div class="span9">
                        <ui:insert name="content">Content</ui:insert>
                    </div>
                </c:if>
                <c:if test="${!userController.connected}">
                    <ui:insert name="login">
                        <div class="hero-unit">
                            <h1>Bienvenue !</h1>
                            <div class="row">
                                <div class="span8">
                                    <p>Cette application est un projet réalisé par <strong>Gaël Francillette</strong> et <strong>Rolland Cerf</strong>. Pour
                                        se connecté en tant qu'utilisateur utilisez le login <strong>user1</strong> et 
                                        le mot de passe <strong>user1</strong>.
                                        Pour la connexion en administrateur saisissez le login <strong>admin</strong> et le
                                        mot de passe <strong>admin</strong>.
                                    </p>
                                    <p>
                                        La page de connexion est accessible <h:link outcome="login.xhtml" value="ici"/> ou bien il est possible de se
                                        connecter avec le formulaire situé dans le bandeau supérieur.
                                    </p>
                                    <p><h:link class="btn btn-primary btn-large" outcome="login.xhtml" value="Connexion"/></p>
                                </div>
                                <div class="span3">
                                    <img src="resources/img/petitcochon.png" alt="petitcochon"/>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="span4">
                                <h2>Layout</h2>
                                <p>
                                    Vous appliquerez un "layout" aux pages, avec un menu sur la gauche et un bandeau 
                                    au-dessus, en utilisant les templates (cf tp2) ou bien des composants de layout 
                                    de la librairie PrimeFaces (comme dans les démos en ligne sur primefaces.org)
                                </p>
                            </div>
                            <div class="span4">
                                <h2>Connexion</h2>
                                <p>Vous devrez gérer des sessions utilisateurs, avec connexion par login/password. Une fois 
                                    loggé, les champs pour entrer le login et le password ne sont plus affichés, puisqu'une 
                                    session est ouverte. Si on se loggue admin on a accès à toutes les 
                                    fonctionnalités, à tous les comptes, à tous les utilisateurs. Si on se loggue en tant 
                                    que client de la banque on a accès qu'à ses comptes, on peut déposer/retirer/transférer 
                                    mais que sur ses comptes. On ne peut pas créer/supprimer de compte.</p>
                            </div>
                            <div class="span4">
                                <h2>Base de données</h2>
                                <p>
                                    OBLIGATOIRE : au moins 500 comptes bancaires et 50 utilisateurs, vous pourrez 
                                    utiliser le site http://www.generatedata.com pour générer un .csv avec des 
                                    comptes ou mieux, transformer le .csv en code Java pour inclure dans un EJB 
                                    @SIngleton @Startup comme on a fait en TP.      
                                </p>
                            </div>
                        </div>
                    </ui:insert>
                </c:if>
            </div>
        </div>
        <!--<h:outputScript library="js" name="jquery.js" />-->
        <h:outputScript library="js" name="bootstrap.min.js" />
        </f:view>
    </h:body>

</html>
